<template>
  <div v-dragWindow class="search_chaht">
    <Chat ref="chatComp" v-show="isShowChat" @close="close" @activeWeb="activeWeb" @setting="setting" :isSending="isSending" @setSending="setSending"
      @copyQuestion="copyQuestion" @miniSize="miniSize" @clearChat="clearChat" :sendMessage="sendMessage"></Chat>
    <PropmptSearch ref="propmptSearchRef" :isShowChat="isShowChat" 
    :isSending="isSending"
    @popupChat="popupChat"
      @setBroseWinodwHeight="setBroseWinodwHeight" @sending="sending" @clearChat="clearChat" @activeWeb="activeWeb"
      @setting="setting" @miniSize="miniSize"></PropmptSearch>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import PropmptSearch from "./components/search.vue";
import Chat from "./components/chat.vue";
import { SendMessage, chatItem } from "./components/types";
import { isElectron } from "@/utils";
import { chatWebUrl } from "@/utils/api.ts";

export default defineComponent({
  name: "",
  components: {
    PropmptSearch,
    Chat,
  },
  setup() {
    const infoMap = JSON.parse(localStorage.getItem("infoMap") || "null");
    const chatComp = ref();
    const isShowChat = ref(false);
    const isSending = ref(false);// 问答正在输出
    const propmptSearchRef = ref<typeof PropmptSearch>();
    const sendMessage = ref<SendMessage>();
    const chatList = ref<chatItem[]>([
      {
        id: "1",
        type: "question",
        text: "测试问题",
        visible: false,
      },
      {
        id: "2",
        type: "answer",
        text: "测试回答",
        visible: false,
      },
    ]);
    function setSending(val: boolean) {
      isSending.value = val;
    }
    function popupChat() {
      isShowChat.value = true;
    }
    const initOpenKey = () => {//弹出检索框快捷键
      if (!isElectron()) return
      const { ipcRenderer } = require("electron")
      let openKey = 'Ctrl+Q'
      infoMap.map((item:any)=>{
        if(item.key==='toggleKey') openKey = item.value
      })
      const oldKey = null
      ipcRenderer.invoke("setOpenKey", { openKey, oldKey });
    }
    initOpenKey();
    async function setBroseWinodwHeight(type = "normal") {

      const SearchWithChatHeight = 220 + 150;
      const SearchWithoutChatHeight = 220;
      const ChatHeight = 680 - SearchWithoutChatHeight;
      const isHidden = propmptSearchRef.value?.drop.getAttribute("is-hidden");
      let curHeight: number = SearchWithoutChatHeight;

      if (type !== "send") {
        if (isHidden === "true") {
          curHeight = SearchWithChatHeight;
        } else {
          curHeight = SearchWithoutChatHeight;
        }
      }

      if (isShowChat.value) {
        curHeight += ChatHeight;
      }
      if (isElectron()) {
        const { ipcRenderer } = require("electron");
        await ipcRenderer.invoke("search", {
          curHeight,
        });
      }
    }
    function sending(data: SendMessage) {
      sendMessage.value = data;
    }
    function close() {
      isShowChat.value = false;
      setBroseWinodwHeight();
    }
    function clearChat() {
      chatComp.value.onClear();
    }
    function copyQuestion(opt: any) {
      propmptSearchRef?.value?.copyQuestion(opt);
    }
    function activeWeb() {
      if (!isElectron()) return;
      const { shell } = require('electron')
      shell.openExternal(chatWebUrl);
    }
    function setting() {
      if (!isElectron()) return
      const { ipcRenderer } = require("electron");
      ipcRenderer.invoke("openSetting");
    }

    function miniSize() {
      if (!isElectron()) return
      const { ipcRenderer } = require("electron");
      ipcRenderer.invoke("miniSize");
    }
    return {
      isSending,
      setSending,
      popupChat,
      isShowChat,
      setBroseWinodwHeight,
      close,
      propmptSearchRef,
      copyQuestion,
      sending,
      sendMessage,
      chatList,
      clearChat,
      chatComp,
      activeWeb,
      setting,
      miniSize
    };
  },
});
</script>
<style scoped lang="scss">
.search_chaht {
  width: 100%;
  margin: 0 auto;
  background-color: transparent;
  box-shadow: 0px 0px 12px rgb(146, 208, 253);
  background-color: #f3f5fd;
  border-radius: 10px;

  &::-webkit-scrollbar {
    width: 0;
    /* 设置滚动条宽度 */
  }

  &::-webkit-scrollbar-thumb {
    border-radius: none;
  }

  .chat {
    height: 480px;
    background-color: red;
  }
}
</style>
